<template>
  <div id="inputer">
    <div id="buttons">
      <button id="add" @click="add">新增</button>
      <button id="remove" @click="remove">移除</button>
      <button id="clear" @click="clear">清空</button>
      <button id="save" @click="save">保存</button><br><br>
      <input id="titleInput" type="text" v-model="title" placeholder="请输入数据标题（如：产品销售情况）">
    </div>
    <br>
    <table>
      <tr>
        <th>Key（键）</th>
        <th>Value（值）</th>
      </tr>
      <tbody>
        <tr v-for="(item,index) in map" :key="index" 
        :class="{selectedData : selectDataIndex === index}" @click="selectData(index)">
          <td>
            <input type="text" v-model="item.key" placeholder="请输入键">
          </td>
          <td>
            <input type="number" v-model="item.value" placeholder="请输入值（只支持整数类型）">
          </td>
        </tr>
      </tbody>
    </table><br>
  </div>
</template>

<script>
import 'jquery-ui/ui/widgets/button';
import 'jquery-ui/ui/widgets/dialog';

let emptyItem = {
  key: null,
  value: null
}
export default {
  name: 'inputer',
  data() {
    return {
      map: [
        {
          key: null,
          value: null
        }
      ],
      selectDataIndex: -1,
      title: '',
    }
  },
  methods: {
    add() {
      if (this.selectDataIndex < 0) {
        this.map.push({
          key: null,
          value: null
        });
      } else {
        this.map.splice(this.selectDataIndex + 1, 0, {
          key: null,
          value: null
        });
      }
    },
    remove() {
      if (this.map.length <= 1) {
        this.clear();
        return;
      }
      if (this.selectDataIndex < 0) {
        this.map.pop();
      } else {
        this.map.splice(this.selectDataIndex, 1);
        this.selectDataIndex--;
      }
    },
    clear() {
      this.map = [
        {
          key: null,
          value: null
        }
      ];
      this.selectDataIndex = -1;
    },
    save() {
      if (this.title == null || this.title.length === 0) {
        alert('数据标题不能为空！');
        return;
      }
      let dataAxis = [];
      let data = [];
      console.log(this.map);
      this.map.forEach(item => {
        if (item.key == null || item.value == null || item.key.length == 0 || item.value.length == 0) {
          alert('已添加的行中key和value不能为空！');
          return;
        }
        dataAxis.push(item.key);
        data.push(item.value);
      });
      this.$store.commit('init', {
        dataAxis,
        data,
        title : this.title
      });
      sessionStorage.setItem('loaded',1);
      $(this.fatherDialog).dialog('close');
      this.$router.push('bar');
    },
    selectData(index) {
      if (this.selectDataIndex !== index) {
        this.selectDataIndex = index;
      } else {
        this.selectDataIndex = -1;
      }
    }
  },
  mounted() {
    $('#add, #remove, #clear, #save').button();
  },
  props: {
    fatherDialog: {}
  }
}
</script>

<style>
  #inputer table {
    margin: 0 auto;
  }
  #inputer table tr:hover {
    background-color: gainsboro;
  }
  #inputer table .selectedData {
    background-color: rgb(201, 199, 199);
  }
  #inputer table td {
    padding: 10px 10px;
    width: 50%;
    border-radius: 5px;
  }
  #titleInput {
    width: 60%;
    margin: 0 auto;
  }
  #inputer input {
    border: none;
    border-bottom: 2px solid gainsboro;
  }
  #buttons {
    width: 100%;
    text-align: center;
  }
  #buttons button {
    margin: 10px,20px;
  }
</style>